<template>
  <section class="cinema-box">
    <div class="cinema_introduce">
      <ul>
        <li v-for="item in area" :key="item.id">
          <router-link :to="{name:'cdetail',params:{id:item.id}}">
            <div class="cinema_introduce_mark">
              <div class="cinema_name">
                <h4>{{item.cinemaName}}</h4>
                <span v-if="item.showMark">{{item.showMark}}</span>
              </div>
              <p>{{item.address}}</p>
              <div class="cinema_introduce_new">
                <span>座</span>
                <span>新人专享</span>
                <span>￥18.8元起</span>
              </div>
            </div>
          </router-link>
        </li>
      </ul>
    </div>

    <router-view></router-view>
  </section>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["area"])
  }
};
</script>

<style>
.cinema-box {
  margin-top: 40px;
}
.cinema_introduce {
  background-color: #fff;
  padding-left: 15px;
}
.cinema_introduce .cinema_name h4 {
  display: inline-block;
  color: black;
}
.cinema_name span {
  border: 1px solid #adb6ca;
  color: #adb6ca;
  font-size: 12px;
  border-radius: 2px;
}
.cinema_introduce li {
  padding-top: 15px;
  border-bottom: 1px solid #d9d9d9;
}
.cinema_introduce_mark {
  padding-bottom: 10px;
}
.cinema_introduce_mark p {
  margin-top: 10px;
  font-size: 10px;
  color: #9c9c9c;
}
.cinema_introduce_mark .cinema_introduce_new {
  margin-top: 10px;
  font-size: 12px;
  color: #9c9c9c;
}
.cinema_introduce_new span:nth-child(1) {
  border: 1px solid #00b8f0;
  color: #00b8f0;
  border-radius: 2px;
}
.cinema_introduce_new span:nth-child(2) {
  color: white;
  background-color: #ff8625;
  border: 1px solid #ff8625;
  border-radius: 2px;
}
</style>
